<template>
	<view class="item-box">
		<view class="title-box">
			<view class="title">
				{{props.record?.name}}
				<img :src="imgList[props?.index % 8]" class="img"></img>
			</view>
			<view class="title-right">
				<view class="imgbox">
					<img v-if="swIndex === 0" :src="image1" class="img"></img>
					<img v-if="swIndex > 0 " :src="image2" class="img"></img>

					<img v-if="swIndex < paginatedList.length - 1" :src="image3" class="img">
					</img>
					<img v-if="swIndex === paginatedList.length - 1" :src="image4" class="img"></img>
				</view>
				<text class="more" @click="goToList(props.record)">more</text>
			</view>
		</view>
		<!-- <t-swiper :navigation="{ type: 'false' }" :autoplay="false" @click="handleClick" @change="handleChange">
		      <t-swiper-item v-for="(page, index) in paginatedList" :key="index" style="height: 210px;">
		        <view class="list-box">
		        	<CoverImage class="itembox"  v-for="(item,index) in page" :index="item.courseId" @click="goToDetail(item.courseId)" :item="item" :cache="false"></CoverImage>
		        </view>
		      </t-swiper-item>
		 </t-swiper> -->
		 <n-carousel
		     slides-per-view="auto"
		     :space-between="15"
		     :loop="false"
		     draggable
			 :show-dots="false"
		   >
		     <n-carousel-item style="width: 100%;display: flex;justify-content: space-between;
			 align-items: center;margin-top: 8px;" v-for="(page, index) in paginatedList" :key="index" >
				 <CoverImage class="itembox" v-for="(item,index) in page"  :index="item.courseId" @click="goToDetail(item.courseId)" :item="item" :cache="false"></CoverImage>
		     </n-carousel-item>
		   </n-carousel>

	</view>
</template>

<script setup>
	import {
		ref,
		defineProps,
		computed,
		onMounted
	} from "vue";
	import topicApi from "@/api/topicApi";
	import {
		debounce
	} from 'lodash';
	import {
			useRouter,
			useRoute
		} from 'vue-router';
	import ImageCache from "../ImageCache";
	import comicApi from "@/api/comicApi";
	import CoverImage from "../CoverImage";
	import image1 from "@/assets/index/l.png";
	import image2 from "@/assets/index/l-active.png";
	import image3 from "@/assets/index/r-active.png";
	import image4 from "@/assets/index/r.png";
    import Vector1 from "@/assets/index/Vector-1.png"
	import Vector2 from "@/assets/index/Vector-2.png"
	import Vector3 from "@/assets/index/Vector-3.png"
	import Vector4 from "@/assets/index/Vector-4.png"
	import Vector5 from "@/assets/index/Vector-5.png"
	import Vector6 from "@/assets/index/Vector-6.png"
	import Vector7 from "@/assets/index/Vector-7.png"
	import Vector8 from "@/assets/index/Vector-8.png"
	
	
	const router = useRouter();
	const route = useRoute();
	
	const emit = defineEmits(["reload"])
	const props = defineProps({
		record: {
			type: Object,
			default: {}
		},
		index: {
			typt: Number,
			default: 0
		}
	});

	const swIndex = ref(0);
	const dataList = ref([]);

	// 切换
	const handleChange = (event) => {
		swIndex.value = event.detail?.current;
	}
	
	const shuffleArray = (array) =>{
	  for (let i = array.length - 1; i > 0; i--) {
	    const j = Math.floor(Math.random() * (i + 1));
	    [array[i], array[j]] = [array[j], array[i]]; // 交换元素
	  }
	  return array;
	}
	
	const paginatedList = computed(() => {	
		const itemsPerPage = 3;
		const paginated = [];
		for (let i = 0; i < dataList.value.length; i += itemsPerPage) {
			paginated.push(dataList.value.slice(i, i + itemsPerPage));
		}
		// getList();
		return paginated;
	});
	
	
	onMounted(() => {
		dataList.value = shuffleArray(props.record?.courseList);
	})

	// const paginatedList = computed(() => {
	// 	const itemsPerPage = 3;
	// 	const paginated = [];
	// 	for (let i = 0; i < props.record?.courseList.length; i += itemsPerPage) {
	// 		paginated.push(props.record.courseList.slice(i, i + itemsPerPage));
	// 	}
	// 	return paginated;
	// });


	const imgList = [
		Vector1,
		Vector2,
		Vector3,
		Vector4,
		Vector5,
		Vector6,
		Vector7,
		Vector8
	]
	

	// 打开详情页
	// const goToDetail = (courseId) => {
	// 	router.push({
	// 		name: 'home',
	// 		query: {
	// 			courseId: courseId
	// 		}
	// 	});
	// };
	const goToDetail = debounce((courseId) => {
		router.push({
			name: 'home',
			query: {
				courseId: courseId
			}
		});
	}, 300);

	// 跳转列表页  
	const goToList = (params) => {
		localStorage.setItem('title',params.name);
		localStorage.setItem('tabId',params.id);
		
		// return false
		router.push({
			name: 'special',
		});
	}
</script>

<style lang="scss" scoped>
	.item-box {
		display: flex;
		flex: 1;
		flex-direction: column;
		// height: 400px;
		margin-bottom: 20px;
		
		.imgbox{
			position: relative;
			
			.heart{
				position: absolute;
				right: 3px;
				bottom: 1px;
			}
			
			.over{
				position: absolute;
				right: 3px;
				top: 0px;
			}
		}
		
		


		.title-box {
			display: flex;
			flex-direction: row;

			.title {
				display: flex;
				align-items: center;
				min-width: 107px;
				height: 22px;
				color: #101010;
				font-size: 18px;
				font-weight: 500;
				padding-left: 8px;
				margin-right: 10px;
				position: relative;

				.img {
					width: 107px;
					height: 22px;
					position: absolute;
					top: 0;
					left: 0;
				}

			}

			.title-right {
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				flex: 2;
				border-bottom: 0.5px dashed #D9D9D9;

				.imgbox {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-right: 10px;

					.img {
						width: 12px;
						height: 12px;
					}
				}

				.more {
					display: flex;
					align-items: center;
					color: #000;
					font-size: 14px;
					font-style: normal;
					font-weight: 500;
				}
			}
		}

		.list-box {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			margin-top: 10px;
			width: 100%;
			.itembox{
				margin-right: 12px;
			}

			.itembox:nth-of-type(3n) {
				margin-right: 0;
			}
		}


	}
</style>